使用 Visual Studio Code 开发 Node.js

了解使用 Visual Studio 开发和调试 JavaScript Node.js 项目的步骤。

安装 Visual Studio Code。

安装 git。 Visual Studio Code 与 git 集成，可在侧边栏中提供源代码管理。

添加所需的环境变量。 本文中的示例使用 mongoDB 数据库连接字符串。

如果没有可用的 mongoDB 数据库，则可以：

若要开始，请使用以下步骤克隆示例项目：

打开 Visual Studio Code。

按 F1 显示命令面板。

在命令面板的提示符下输入 gitcl，选择“Git: 克隆”命令，然后按 Enter。

系统提示输入“存储库 URL”时，请输入 https://github.com/Azure-Samples/js-e2e-express-mongodb，然后按 Enter。

选择（或创建）要将项目克隆到的本地目录。

使用此 Node.js 项目时，必须先确保从 npm 安装项目的所有依赖项。

按 Ctrl + Shift + ` 显示Visual Studio Code集成终端。

使用以下命令安装依赖项：

为了在代码库中定位，让我们演练一下 Visual Studio Code 提供的某些导航功能的一些示例。

按 Ctrl + p。

输入 .js 显示项目中的所有 JavaScript/JSON 文件以及每个文件的父目录

选择 server.js，即应用的启动脚本。

将鼠标悬停在第 11 行的 时间戳 上。 这种快速检查文件中变量、模块和类型的功能在项目开发过程中非常有用。

单击变量（如 时间戳 ）上的鼠标，可在同一文件中查看对该变量的所有引用。 若要在项目中查看对某个变量的所有引用，请右键单击该变量，并从上下文菜单中选择“查找所有引用”。

打开 data.js 文件

在行 84 上，通过输入 db.来输入 db 变量的新用法。 Visual Studio Code显示 上db可用的 API 的可用成员。

之所以能够实现自动完成，是因为 Visual Studio Code 在幕后使用 TypeScript（对于 JavaScript 也是如此）来提供键入信息，这些信息在你键入时能够用来显示完成列表。 这种自动获取键入功能适用于 2，000 多个第三方模块，例如React、下划线和 Express。

可以通过浏览 DefinitelyTyped 项目（所有 TypeScript 类型定义的社区驱动源）来了解哪些模块支持此自动完成功能。

浏览代码后，就可以运行应用了。 若要从 Visual Studio Code 运行应用，请按 F5。 通过 F5（调试模式）运行代码时，Visual Studio Code 会启动应用并显示“调试控制台”窗口，其中显示了应用的 stdout。

此外，“调试控制台”已附加到最近运行的应用，因此，可以键入要在应用中评估的、也支持自动完成功能的 JavaScript 表达式。 若要了解此行为，请在控制台中键入 process.env：

打开浏览器并导航到 http://localhost:8080 以查看正在运行的应用。 在文本框中输入文本以添加项目，了解应用的工作方式。

除了能够通过集成控制台运行应用并与之交互以外，你还可以直接在代码中设置断点。 例如，输入 Ctrl + P 以显示文件选取器。 显示文件选取器后，选择 server.js 文件。

在行 53 上设置断点，该断点是 if 路由中用于添加新项的语句。 若要设置断点，只需在编辑器中单击行号左侧的区域，如下图所示。

注意

除了标准断点以外，Visual Studio Code 还支持可用于自定义应用何时应暂停执行的条件断点。 若要设置条件断点，请右键单击要暂停执行的行左侧的区域，选择“添加条件断点”，并指定 JavaScript 表达式（例如 foo = "bar"）或执行计数来定义要在哪种条件下暂停执行。

设置断点后，返回到浏览器中正在运行的应用并添加条目。 此操作立即导致应用在设置断点的第 28 行暂停执行：

暂停应用程序后，可将鼠标悬停在代码的表达式上，以查看其当前值，检查局部变量/监视项和调用堆栈，并使用调试工具栏逐步执行代码。 按 F5 可恢复应用的执行。

前端和后端都是使用 JavaScript 编写的。 因此，在当前调试后端 (Node/Express) 代码过程中的某个时间点，可能需要调试前端 (Angular) 代码。

虽然无需任何特定于Visual Studio Code的配置即可运行和调试Node.js代码，但若要调试前端 Web 应用，需要使用 launch.json 文件来指示Visual Studio Code如何运行应用。

此示例应用包含包含以下 launch.json 调试设置的 ：

Visual Studio Code 能够检测到应用的启动脚本为 server.js。

打开 launch.json 文件后，选择“添加配置”（右下角），然后选择“Chrome: 使用 userDataDir 启动”。

为 Chrome 添加新的运行配置可以调试前端 JavaScript 代码。

可将鼠标悬停在指定的任何设置上，以查看有关该项设置的功能的文档。 此外请注意，Visual Studio Code 会自动检测应用的 URL。 请 webRoot 属性更新为 ${workspaceRoot}/public，使 Chrome 调试程序知道在何处查找应用的前端资产：

若要同时启动和调试前端和后端，需创建一个复合运行配置来告知 Visual Studio Code 要并行运行的配置集。

请在 launch.json 文件中添加以下代码片段作为顶级属性（与现有的 configurations 属性同级）。

在 compounds.configurations 数组中指定的字符串值引用配置列表中各个条目的名称。 如果已修改这些名称，则需要在数组中进行相应的更改。 例如，切换到调试选项卡，将选定的配置更改为 Full-Stack（复合配置的名称），然后按 F5 运行该配置。

运行配置会启动 Node.js 应用（可在调试控制台输出中查看）和 Chrome（配置为导航到 http://localhost:8080 上的 Node.js 应用）。

按 Ctrl+P，然后输入（或选择）todos.js，即应用前端的 Angular 主控制器。

在第 11 行设置一个断点，这是要创建的新待办事项条目的入口点。

返回到正在运行的应用，添加新的待办事项条目，然后可以看到，Visual Studio Code 现已暂停 Angular 代码中的执行。

与执行 Node.js 调试时一样，可以通过将鼠标悬停在表达式上来查看局部变量/监视项、在控制台中评估表达式，等等。

有两个很酷的事情需要注意：

“调用堆栈”窗格显示两个不同的堆栈： “Node”和“Chrome”，并指示当前暂停了哪个堆栈。

可以在前端和后端代码之间单步执行：按 F5 运行，这样就会命中此前在 Express 路由中设置的断点。

通过此设置，现在可以直接在 Visual Studio Code 中有效调试前端、后端或完整堆栈的 JavaScript 代码。

此外，复合调试程序的概念并不仅仅局限于两个目标进程，而且也不仅仅局限于 JavaScript。 因此，在微服务应用（可能是 polyglot）中操作时，可以使用完全相同的工作流（前提是安装语言/框架的相应扩展）。